<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" href="../css/main.css"/>
    <link rel="stylesheet" href="../css/shop_cart.css"/>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-top">
    <a class="aui-pull-left aui-btn go-back" >
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">购物车</div>
</header>
<section id="app" v-cloak>
      <ul class="aui-list aui-media-list">
          <li class="aui-list-item" v-for="goods,index in goodsList" >
              <div class="aui-media-list-item-inner">
                  <div class="aui-list-item-media" v-on:click="checkItem(index)">
                      <label class="check-radio"><input class="aui-radio" type="radio"  v-bind:checked="goods.isChecked" > </label>
                      <img v-bind:src="goods.goodsImg">
                  </div>
                  <div class="aui-list-item-inner">
                      <div class="aui-list-item-text">
                          <div class="aui-list-item-title">{{goods.goodsName}}</div>
                          <div class="aui-list-item-right aui-font-size-16">{{goods.price*goods.goodsNum}}元</div>
                      </div>
                      <div class="aui-list-item-text">
                          {{goods.goodsDesc}}
                      </div>
                      <div class="aui-info" >
                          <div class="aui-bar aui-bar-btn"   type="count" >
                              <div class="aui-bar-btn-item aui-font-size-20 " v-on:click="muchOrLess(index,-1)">
                                  <i class="aui-iconfont aui-icon-minus"></i>
                              </div>
                              <div class="aui-bar-btn-item">
                                  <input type="number" class="aui-input aui-text-center" id="count" v-model="goods.goodsNum">
                              </div>
                              <div class="aui-bar-btn-item aui-font-size-20"  v-on:click="muchOrLess(index,1)">
                                  <i class="aui-iconfont aui-icon-plus"></i>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </li>
      </ul>

      <footer class="aui-bar aui-bar-tab" id="footer">
          <div  class="aui-flex-item-12">
          <ul class="aui-flex-col">
              <li class="aui-flex-item-3" v-on:click="isAllChose()">
                  <input class="aui-radio" type="radio" v-bind:checked="isAllChoseGoods">
                  全选
              </li>
              <li class="aui-flex-item-6">合计:{{countMoney}}元</li>
              <li class="aui-flex-item-2" v-on:click="goBuy">
                  <input class="aui-btn aui-btn-danger btnCount" type="button" value="结算">
              </li>
          </ul>
          </div>
      </footer>
</section>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript" src="../js/aui-tab.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/aui-list-swipe-backup.js"></script>
<script type="text/javascript" src="../js/shop_cart.js"></script>
  <script type="text/javascript">
      var vltHome = new Vue({
          el:'#app',
          data:{
              goodsList:[],//商品列表
              countMoney:0,//合计
              isAllChoseGoods:true,//是否全选

          },
          methods:{
              goHome:function(){//首页
                  window.location.href = "../index.html";
              },
              getGoodsList:function(){//获取商品列表 demo
                  var list = [
                      {
                          goodsName:"商品1",
                          goodsDesc:"这是商品1描述",
                          goodsImg:"../images/3.png",
                          goodsNum:1,
                          price:10,
                          isChecked:true
                      },
                      {
                          goodsName:"商品2",
                          goodsDesc:"这是商品2描述",
                          goodsImg:"../images/3.png",
                          goodsNum:2,
                          price:31,
                          isChecked:true
                      }
                  ]
                  $.ajax({
                      url:'http://localhost/wx/frontend/web/index.php?r=goods%2Fgoods%2Fgoodslist',
                      type:'get',
                      dataType: 'JSONP',
                      success:function (data){
                            var mes = eval('('+data+')');
                          console.log(mes)
                      },
                      error:function(){

                      }
                  })
                  vltHome.goodsList = list;
              },
              checkItem:function(index){//是否选中该商品
                  vltHome.goodsList[index].isChecked =  !vltHome.goodsList[index].isChecked;
                  if(!vltHome.goodsList[index].isChecked){//取消选中
                      vltHome.isAllChoseGoods = false;
                  }
                  vltHome.countMoneyFun();
              },
              muchOrLess:function(index,type){//添加或减少 商品   type 1添加  -1减少
                  vltHome.goodsList[index].isChecked = true;
                  if(type == 1){//添加  需要判断小于物品的总数
                      vltHome.goodsList[index].goodsNum +=1;
                  }else{//减少  判断 >=1
                      if(vltHome.goodsList[index].goodsNum >1){
                          vltHome.goodsList[index].goodsNum -=1;
                      }
                  }
                  vltHome.countMoneyFun();
              },
              countMoneyFun:function(){//合计
                  vltHome.countMoney = 0;
                    for(var v=0;v<vltHome.goodsList.length;v++){ //待优化
                        var temp = vltHome.goodsList[v];
                        if(temp.isChecked){
                            vltHome.countMoney +=temp.goodsNum*temp.price;
                        }
                    }
              },
             goBuy:function(){
                 window.location.href = "../html/buy.html";
             },
              isAllChose:function(){ //是否全选
                  vltHome.isAllChoseGoods = !vltHome.isAllChoseGoods;
                  vltHome.countMoney = 0;
                  for(var v=0;v<vltHome.goodsList.length;v++){ //待优化
                      var temp = vltHome.goodsList[v];
                      if(vltHome.isAllChoseGoods){ //全部选
                          temp.isChecked = true;
                      }else{//全部不选
                          temp.isChecked = false;
                      }
                      if(temp.isChecked){ //计算金额
                          vltHome.countMoney +=temp.goodsNum*temp.price;
                      }else{
                          vltHome.countMoney = 0;
                      }
                  }

              }
          }
      });


      vltHome.getGoodsList();
      vltHome.countMoneyFun();
  </script>
</body>
</html>